<template>
	<div>
		<el-form :model="searchData" ref="ruleForm" inline  size="small"  class="header">
			<el-form-item>
				<el-select v-model="searchData.school_id" placeholder="请选择所属学校" clearable size="small" @change="changeSchool">
					<el-option v-for="item in schoolData" :key="item.id" :label="item.school_name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item>
				<el-select v-model="searchData.class_name" placeholder="请选择所属班级" clearable size="small">
					<el-option v-for="(item,index) in classData" :key="index" :label="item" :value="item">
					</el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item>
				<el-input type="text" v-model="searchData.key" placeholder="请输入关键字" clearable size="small"></el-input>
			</el-form-item>
			
			<el-form-item>
				<el-button type="primary" size="mini" icon="el-icon-search" @click="getStudentList">搜索</el-button>
			</el-form-item>
			
			<el-form-item class="addBtn">
				<el-button type="primary" size="mini" icon="el-icon-plus" @click='addRechargeClick'>新增</el-button>
			</el-form-item>
		</el-form >

		<div class="table-wrap">
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="school_name" label="所属学校" align="center">
					<template slot-scope="scope">
						<span class="name" @click.stop="toDetail('school',scope.row)">{{scope.row.school_name}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="teacher_name" label="指导教师" align="center">
					<template slot-scope="scope">
						<span class="name" @click.stop="toDetail('teacher',scope.row)">{{scope.row.teacher_name}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="realname" label="学生姓名" align="center"></el-table-column>
				<el-table-column prop="class_name" label="所属班级" align="center"></el-table-column>
				<el-table-column prop="score" label="学生分数" align="center"></el-table-column>
				<el-table-column prop="desc" label="描述" align="center"></el-table-column>
				<el-table-column label="操作" align="center" min-width="120">
					<template slot-scope="scope">
						<el-button type="text" @click="scoreClick(scope.row)">分配积分</el-button>
						<el-button type="text" @click="editRechargeClick(scope.row)">编辑</el-button>
						<el-button type="text" @click="deleteRechargeClick(scope.row)">删除</el-button>
						<el-button type="text" @click="resetPassWord(scope.row)">重置密码</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<common-pagination v-if='total > 10' :total="total" :size="searchData.size" @size-change="handelPagesizeChange"
			@page-change="handlePageChange"></common-pagination>

		<common-dialog :title="dialogTitle" :dialogVisible="dialogVisible" @cancel="dialogVisible = false"
			@confirm="dialogConfirmClick" @dialog-close="dialogClose" dialogWidth="500px">
			<el-form :model="studentInfo" :rules="rules" ref="ruleForm" label-width="80px">
				<el-form-item label="所属学校" prop="school_id">
					<el-select v-model="studentInfo.school_id" placeholder="请选择所属学校" clearable size="small"
						class="width-100" @change="changeSchool">
						<el-option v-for="item in schoolData" :key="item.id" :label="item.school_name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="指导教师" prop="teacher_id">
					<el-select v-model="studentInfo.teacher_id" placeholder="请选择指导教师" clearable size="small"
						class="width-100">
						<el-option v-for="item in teacherData" :key="item.id" :label="item.realname" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item label="学生姓名" prop="realname">
					<el-input type="text" v-model="studentInfo.realname" placeholder="请输入教师名称"></el-input>
				</el-form-item>
				
				<el-form-item label="用户名" prop="username">
					<el-input type="text" v-model="studentInfo.username" :disabled='dialogType == "edit"' placeholder="请输入用户名"></el-input>
				</el-form-item>
				
				<el-form-item label="登录密码" :prop='dialogType == "add" ? "password" :""' v-if='dialogType !== "edit"'>
					<el-input type="password" v-model="studentInfo.password"  placeholder="请输入登录密码"></el-input>
				</el-form-item>

				<el-form-item label="所属班级" prop="class_name">
					<el-input type="text" v-model="studentInfo.class_name" placeholder="请输入所属班级"></el-input>
				</el-form-item>
				
				<el-form-item label="描述">
					<el-input
					  type="textarea"
					  :autosize="{ minRows: 2}"
					  show-word-limit
					  placeholder="请输入描述"
					  v-model="studentInfo.desc">
					</el-input>
				</el-form-item>

			</el-form>
		</common-dialog>
		
		<common-dialog title="分配积分" :dialogVisible="scoreDialogVisible" @cancel="scoreDialogVisible = false"
			@confirm="scoreDialogConfirmClick" @dialog-close="dialogClose" dialogWidth="500px">
			<el-form :model="scoreInfo" :rules="scoreRules" ref="scoreForm" label-width="80px">
				<el-form-item label="分配积分" prop="score">
					<el-input-number v-model="scoreInfo.score" size="small" :min="0" placeholder="请输入分配积分" style="width: 200px;"></el-input-number>
				</el-form-item>
		
				<el-form-item label="积分状态" prop="type">
					<el-radio-group v-model="scoreInfo.type">
					  <el-radio label="1">增加</el-radio>
					  <el-radio label="2">减少</el-radio>
					</el-radio-group>
				</el-form-item>
		
				<el-form-item label="积分描述" prop='desc'>
					<el-input
					  type="textarea"
					  :autosize="{ minRows: 2}"
					  show-word-limit
					  placeholder="请输入积分描述"
					  v-model="scoreInfo.desc">
					</el-input>
				</el-form-item>
			</el-form>
		</common-dialog>
	</div>
</template>

<script>
	import CommonDialog from '@/components/CommonDialog';
	import CommonPagination from '@/components/CommonPagination';
	import {
		getClassList,
		schoolList
	} from '@/api/school';
	import {
		studentList,
		studentOperate,
		studentDelete,
		studentScoreEdit,
		studentReset,
		getTeacherList
	} from '@/api/student';
	import {
		statusList,
		vipList
	} from '@/jslibs/enum';
	export default {
		name: 'messagepush',
		data() {
			return {
				statusList,
				vipList,
				tableData: [],
				total: 0,
				searchData: {
					page: 1, //第几页
					size: 10,
					school_id:"",
					class_name:"",
					key:""
				},
				studentInfo: {
					school_id:'',
					teacher_id:'',
					realname:'',
					username:'',
					password:'',
					class_name:'',
					desc:''
				},
				dialogVisible: false,
				dialogTitle: '',
				dialogType: '',
				scoreInfo:{
					score:undefined,
					type:"",
					desc:""
				},
				scoreDialogVisible:false,
				classData:[],
				schoolData:[],
				teacherData:[],
				rules: {
					school_id: [{
						required: true,
						message: "请选择所属学校",
						trigger: "change"
					}],
					teacher_id: [{
						required: true,
						message: "请选择知道教师",
						trigger: "change"
					}],
					realname: [{
						required: true,
						message: "请输入学生姓名",
						trigger: "blur"
					}],
					
					username: [{
						required: true,
						message: "请输入用户名",
						trigger: "blur"
					}],
					
					password: [{
						required: true,
						message: "请输入登录密码",
						trigger: "blur"
					}],
					
					class_name: [{
						required: true,
						message: "请输入所属班级",
						trigger: "blur"
					}]
				},
				scoreRules:{
					score: [{
						required: true,
						message: "请输入分配积分",
						trigger: "blur"
					}],
					type: [{
						required: true,
						message: "请选择积分状态",
						trigger: "change"
					}],
					desc: [{
						required: true,
						message: "请输入积分描述",
						trigger: "blur"
					}],
				}
			}
		},

		mounted() {
			this.getSchoolList()
			this.getStudentList();
		},

		methods: {
			async getStudentList() {
				const {
					status,
					data
				} = await studentList(this.searchData);
				if (status !== 200) return
				if (data.code == 200) {
					this.tableData = data?.data?.list || [];
					this.total = data?.data?.total || 0;
				} else {
					this.tableData = [];
					this.total = 0
					this.$message.warning(data?.message || '获取失败');
				}
			},
			
			async getSchoolList() {
				const {
					status,
					data
				} = await schoolList({page: 1,size: 1000});
				if (status !== 200) return
				if (data.code == 200) {
					this.schoolData = data?.data?.list || [];
				} else {
					this.schoolData = [];
					this.$message.warning(data?.message || '获取失败');
				}
			},
			
			changeSchool(){
				this.studentInfo.teacher_id = "";
				this.searchData.class_name = "";
				this.classData = [];
				this.teacherData = [];
				this.getTeacherBySchool();
				this.getClassBySchool();
			},
			
			async getTeacherBySchool(){
				if(this.studentInfo.school_id){
					const {
						status,
						data
					} = await getTeacherList({school_id:this.studentInfo.school_id});
					if (status !== 200) return
					if (data.code == 200) {
						this.teacherData = data?.data || [];
					} else {
						this.teacherData = [];
						this.$message.warning(data?.message || '获取失败');
					}
				}
			},
			
			async getClassBySchool(){
				if(this.searchData.school_id){
					const {
						status,
						data
					} = await getClassList({school_id:this.searchData.school_id});
					if (status !== 200) return
					if (data.code == 200) {
						this.classData = data?.data || [];
					} else {
						this.classData = [];
						this.$message.warning(data?.message || '获取失败');
					}
				}
			},

			addRechargeClick() {
				this.dialogType = 'add';
				this.dialogTitle = '新增学生';
				this.dialogVisible = true;
			},

			editRechargeClick(row) {
				this.studentInfo = JSON.parse(JSON.stringify(row));
				this.dialogType = 'edit';
				this.dialogTitle = '编辑学生';
				if(this.studentInfo.school_id){
					this.getTeacherBySchool()
				}
				this.dialogVisible = true;
			},

			//删除
			deleteRechargeClick(row) {
				this.$confirm('是否删除该学生?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async() => {
					const postData = {id: row.id}
					const {
						status,
						data
					} = await studentDelete(postData);
					if (status === 200) {
						if (data.code == 200) {
							this.getStudentList();
							this.$message.success("删除学生成功");
							this.dialogVisible = false;
						} else {
							this.$message.warning(data?.msg || "删除学生失败");
						}
					}
				}).catch(() => {
				
				});
			},
			
			//分配积分
			scoreClick(row){
				this.scoreInfo.id = row.id;
				this.scoreInfo.score = row.score || undefined;
				this.scoreDialogVisible = true;
			},
			
			//确定操作
			async dialogConfirmClick() {
				this.$refs.ruleForm.validate((flag) => {
					if (flag) {
						this.handleSubmit()
					}
				})
			},
			
			//确定分配积分
			scoreDialogConfirmClick(){
				this.$refs.scoreForm.validate(async(flag) => {
					if (flag) {
						const {
							status,
							data
						} = await studentScoreEdit(this.scoreInfo);
						if (status === 200) {
							if (data.code == 200) {
								this.getStudentList();
								this.$message.success("积分分配成功");
								this.scoreDialogVisible = false;
							} else {
								this.$message.warning(data?.msg || "积分分配失败");
							}
						}
					}
				})
			},

			async handleSubmit() {
				switch (this.dialogType) {
					case 'add': {
						const {
							status,
							data
						} = await studentOperate(this.studentInfo);
						if (status === 200) {
							if (data.code == 200) {
								this.getStudentList();
								this.$message.success("新增学生成功");
								this.dialogVisible = false;
							} else {
								this.$message.warning(data?.msg || "新增学生失败");
							}
						}
						break
					}
					case 'edit': {
						const {
							status,
							data
						} = await studentOperate(this.studentInfo);
						if (status === 200) {
							if (data.code == 200) {
								this.getStudentList();
								this.$message.success("编辑学生成功");
								this.dialogVisible = false;
							} else {
								this.$message.warning(data?.msg || "编辑学生失败");
							}
						}
						break;
					}
				}
			},
			
			//重置密码
			resetPassWord(row){
				this.$confirm('是否重置密码?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async() => {
					const postData = {id: row.id}
					const {
						status,
						data
					} = await studentReset(postData);
					if (status === 200) {
						if (data.code == 200) {
							const password = data?.data?.password;
							const message = `密码重置为：${password}`
							this.$alert(message, '重置密码', {
							  confirmButtonText: '确定',
							});
						} else {
							this.$message.warning(data?.msg || "重置密码失败");
						}
					}
				}).catch(() => {
				
				});
			},

			dialogClose() {
				this.dialogVisible = false;
				this.scoreDialogVisible = false;
				this.teacherData = [];
				this.studentInfo = {
					school_id:'',
					teacher_id:'',
					realname:'',
					username:'',
					password:'',
					class_name:'',
					desc:''
				};
				this.resetFormData()
			},

			resetFormData() {
				this.$refs.ruleForm?.resetFields()
				this.$refs.scoreForm?.resetFields()
			},

			handelPagesizeChange(size) {
				this.searchData.size = size;
				this.getStudentList();
			},
			handlePageChange(page) {
				this.searchData.page = page;
				this.getStudentList();
			},
			
			toDetail(type,row){
				if(type == "school"){
					this.$router.push({
						path:"/schoolList",
						query:{
							key:row?.school_name
						}
					});
				}
				else if(type == "teacher"){
					this.$router.push({
						path:"/teacherList",
						query:{
							schoolId:row?.school_id,
							key:row?.teacher_name
						}
					});
				}
			}
		},

		components: {
			CommonDialog,
			CommonPagination
		}
	}
</script>

<style lang="less" scoped>
	@import '~@/assets/styles/variables.less';
	.addBtn {
		float: right;
	}
	.dialog-body-wrap {
		text-align: center;

		.input-wrap {
			display: flex;
			align-items: center;
			margin-bottom: 20px;

			label {
				margin-right: 30px;
				width: 110px;
				text-align: right;
			}

			.recharge_money_input,
			.recharge_amount_input {
				width: 194px;
			}
		}
	}
	.name{
		cursor: pointer;
		color: #FF8A00;
	}
</style>